<template>
  <div id="confirm-order">
    <confirm-order-nav-bar />
    <scroll class="scroll">
      <confirm-order-main
        :order-info="orderInfo"
        :entities="entities"
        :shop-introduction="shopIntroduction"
        :select-address="selectAddress"
        @handleOpenPaymentMethod="handleOpenPaymentMethod"
        :select-tag="selectTag"
        @handleTagContent="handleTagContent"
      />
    </scroll>
    <confirm-order-footer :order-info="orderInfo" @handlePlaceOrder="handlePlaceOrder" />
    <keep-alive exclude="Remark">
      <router-view
        @obtainAddress="obtainAddress"
        :addresses="addresses"
        :remarks="remarks"
        @handleSkipOrder="handleSkipOrder"
      />
    </keep-alive>
    <payment-method-mask
      :payments="orderInfo.payments"
      v-show="isShowPaymentMethod"
      @handleClosePaymentMethod="handleClosePaymentMethod"
    />
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import ConfirmOrderNavBar from "./childComps/ConfirmOrderNavBar";
import ConfirmOrderMain from "./childComps/ConfirmOrderMain";
import ConfirmOrderFooter from "./childComps/ConfirmOrderFooter";
import PaymentMethodMask from "./childComps/childComps/PaymentMethodMask";

import {
  getCheckout,
  addAddresses,
  getAddresses,
  getRemarks,
  getOrders
} from "network/confirmOrder";
import { getNearby } from "network/profile";

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      selectItem: [],
      orderInfo: {},
      entities: [],
      shopIntroduction: {},
      nearby: [],
      addresses: [],
      selectAddress: {},
      isShowPaymentMethod: false,
      id: "",
      remarks: [],
      selectTag: [],
      transmissionInfo: {}
    };
  },
  computed: {
    ...mapGetters(["geohash"]),
  },
  watch: {
    nearby(value) {
      this.$bus.$emit("nearby", value);
    },
    selectAddress(val) {
      this.transmissionInfo.address_id = val.id
    }
  },
  created() {
    this.$bus.$on("handleSkipConfirmOrder", (res) => {
      this.selectItem = res;
    });
    this.$bus.$on("shopIntroductionName", (res) => {
      this.shopIntroduction = res;
    });

    this.$bus.$on("handleSearchNearby", (res) => {
      this.getNearby(res);
    });
    this.$bus.$on("addAddress", (data) => {
      this.addAddresses(localStorage.getItem("user_id"), data);
    });
    this.$bus.$on("handleSelectAddress", (item) => {
      this.selectAddress = item;
    });
    this.$bus.$on("obtainRemark", () => {
      this.getRemarks(this.orderInfo.id, this.orderInfo.sig);
    });
  },
  activated() {
    const entities = [];
    const subordinate = [];
    entities.push(subordinate);
    for (const key in this.selectItem) {
      subordinate.push({
        attrs: [],
        extra: {},
        id: this.selectItem[key].id,
        name: this.selectItem[key].name,
        packing_fee: this.selectItem[key].packing_fee,
        price: this.selectItem[key].price,
        quantity: this.selectItem[key].count,
        sku_id: this.selectItem[key].food_id,
        specs: [this.selectItem[key].specs_name],
        stock: 1000,
      });
    }

    this.entities = entities;
    const data = {
      geohash: this.geohash,
      entities,
      restaurant_id: this.selectItem[0].restaurant_id,
    };
    this.getCheckout(data);

    this.obtainAddress();
  },
  methods: {
    getCheckout(data) {
      getCheckout(data).then((res) => {
        this.orderInfo = res;
        console.log(  this.orderInfo );
      });
    },

    getNearby(keyword) {
      getNearby(keyword).then((res) => {
        this.nearby = res;
      });
    },
    addAddresses(id, data) {
      addAddresses(id, data).then((res) => {
        res.status ? this.obtainAddress() : "";
      });
    },
    getAddresses(id) {
      getAddresses(id).then((res) => {
        this.addresses = res;
      });
    },
    getRemarks(id, sig) {
      getRemarks(id, sig).then((res) => {
        this.remarks = res.remarks;
      });
    },
    getOrders(user_id,cart_id,data) {
      getOrders(user_id,cart_id,data).then(res => {
        res.status ? this.$router.push('/confirmOrder/payment') : this.$toast.handleTipsText(res.message)
      })
    },

    obtainAddress() {
      this.getAddresses(localStorage.getItem("user_id"));
    },

    handleOpenPaymentMethod() {
      this.isShowPaymentMethod = true;
    },
    handleClosePaymentMethod() {
      this.isShowPaymentMethod = false;
    },
    handleSkipOrder(selectTag, otherRemarks) {
      this.selectTag = selectTag;
      otherRemarks
        ? this.selectTag.push({
            sequence: 999,
            text: otherRemarks,
          })
        : "";
    },
    handlePlaceOrder(user_id) {
      console.log(this.orderInfo.cart.restaurant_id);
      const cart_id =  this.orderInfo.cart.id
      const data = {
        address_id: this.transmissionInfo.address_id,
        description: this.transmissionInfo.description,
        entities: this.orderInfo.cart.groups,
        geohash: this.geohash,
        paymethod_id: 1,
        sig: this.orderInfo.sig
      }
      this.getOrders(user_id,cart_id,data)
      this.$store.commit('emptyGoodsShopInfo',this.orderInfo.cart.restaurant_id)
    },
    handleTagContent(tagContent) {
      this.transmissionInfo.description = tagContent
    }
  },
  components: {
    Scroll,
    ConfirmOrderNavBar,
    ConfirmOrderMain,
    ConfirmOrderFooter,
    PaymentMethodMask,
  },
};
</script>
<style lang="less" scoped>
#confirm-order {
  position: relative;
  height: 100vh;
  background-color: #f5f5f5;
  z-index: 1;
  .scroll {
    height: calc(100% - 44px - 46px);
    overflow: hidden;
  }
}
</style>